<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-06-06 13:00:53
 * @LastEditTime: 2024-06-17 17:31:00
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 页面管理
 * @FilePath: \chu-meng\client\src\pages\Design\components\SidebarArea\ViewSidebar\ViewArea.vue
 * Copyright 版权声明
-->
<template>
  <a-dropdown :trigger="['contextmenu']" @contextmenu.stop>
    <div class="modWrap">
      <a-directory-tree
        v-model:expandedKeys="expandedKeys"
        v-model:selectedKeys="selectedKeys"
        :tree-data="treeData"
        :blockNode="true"
      >
      <template #title="{ key: treeKey, title }">
        <a-dropdown :trigger="['contextmenu']" @contextmenu.stop>
          <span>{{ title }}</span>
          <template #overlay>
            <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
              <a-menu-item key="CREATE_FOLDER">新建文件夹</a-menu-item>
              <a-menu-item key="UPDATE_FOLDER">新建文件夹</a-menu-item>
              <a-menu-item key="CREATE_FILE">新建页面</a-menu-item>
              <a-menu-item key="UPDATE_FILE">编辑页面</a-menu-item>
              <a-menu-item key="DELETE">删除</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </template>
    </a-directory-tree>
    </div>
    <template #overlay>
      <a-menu @click="onContextCustomMenuClick">
        <a-menu-item key="CREATE_FOLDER">新建一级文件夹</a-menu-item>
        <a-menu-item key="CREATE_FILE">新建一级页面</a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
  <CreateDrawer ref="CreateDrawerRef"></CreateDrawer>
</template>

<script setup>
import {
  ExclamationCircleOutlined
} from '@ant-design/icons-vue'
import { ref, createVNode } from 'vue'
import { Modal } from 'ant-design-vue'
import CreateDrawer from './CreateDrawer.vue'

const CreateDrawerRef = ref(null)

const expandedKeys = ref(['0-0', '0-1'])
const selectedKeys = ref([])
const treeData = [
  {
    title: 'parent 0',
    key: '0-0',
    children: [
      {
        title: 'leaf 0-0',
        key: '0-0-0',
        isLeaf: true,
      },
      {
        title: 'leaf 0-1',
        key: '0-0-1',
        isLeaf: true,
      },
      {
        title: 'leaf 0-0',
        key: '0-0-0',
        isLeaf: true,
      },
      {
        title: 'leaf 0-1',
        key: '0-0-1',
        isLeaf: true,
      },
    ],
  },
  {
    title: 'parent 1',
    key: '0-1',
    children: [
      {
        title: 'leaf 1-0',
        key: '0-1-0',
        isLeaf: true,
      },
      {
        title: 'leaf 1-1',
        key: '0-1-1',
        isLeaf: true,
      },
    ],
  },
]

// 点击右键上的按钮
const onContextMenuClick = (treeKey, menuKey) => {
  console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
  switch (menuKey) {
    case 'CREATE_FOLDER':
      CreateDrawerRef.value.onShow({
        type: 'CREATE_FOLDER'
      })
      break
    case 'UPDATE_FOLDER':
      CreateDrawerRef.value.onShow({
        type: 'UPDATE_FOLDER'
      })
      break
    case 'CREATE_FILE':
      CreateDrawerRef.value.onShow({
        type: 'CREATE_FOLDER'
      })
      break
    case 'UPDATE_FILE':
      CreateDrawerRef.value.onShow({
        type: 'UPDATE_FILE'
      })
      break
    case 'DELETE':
      Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: '是否删除？',
        okText: '确认',
        cancelText: '取消',
        width: 300,
        onOk() {
          alert(3)
        }
      })
      break
  }
}

// 右键自定义菜单 - 被点击
const onContextCustomMenuClick = (e) => {
  console.log(`🚀 ~ onContextCustomMenuClick ~ e:`, e)
  const { key } = e
  switch (key) {
    case 'CREATE_FOLDER':
      CreateDrawerRef.value.onShow({
        type: 'CREATE_FOLDER'
      })
      break
    case 'CREATE_FILE':
      CreateDrawerRef.value.onShow({
        type: 'CREATE_FILE'
      })
      break
  }
}
</script>

<style lang="scss" scoped>
.modWrap{
  :deep(.ant-tree){
    .ant-tree-treenode .ant-tree-node-content-wrapper{
      display: flex;
      .ant-tree-title{
        flex: 1;
        > span{
          display: block;
          width: 100%;
        }
      }
    }
  }
}
</style>
